<template>
    <div>
        <el-row>
            <span style="float: left">当前所选的模块为：{{subsystemCode}}</span>
        </el-row>
        <el-row style="margin-top: 10px">
            <div style="text-align: center">
                <el-transfer
                        style="text-align: left; display: inline-block"
                        v-model="value"
                        :titles="['未添加的商品', '已添加的商品']"
                        :button-texts="['删除', '添加']"
                        :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"
                        @change="handleChange"
                        :data="data">
                    <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
                </el-transfer>
            </div>
        </el-row>
        <el-row style="margin-top: 10px">
            <div style="float: right">
                <el-button type="primary" @click="doSureFunc">确认</el-button>
                <el-button @click="doCancelFunc">取消</el-button>
            </div>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "AddCommodity",
        props:['subsystemCode', 'AddWindowVisible'],
        data() {
            return {
                // 界面显示左边的数据源
                data: [],
                // 处于界面右边的数据源
                value: [],
                // 用于记录左边的数组，方便处理
                left:[],
                // 记录操作，使用 set集合 记录操作过的键值的历史
                option_key: [],
                option_value: [],
                // 最后发送给服务器所用的操作数据，装入key值，供后台进行增加与删除
                option_add: [],
                option_delete: [],
            };
        },
        methods:{
            // 获取商品列表
            getCommodityLis () {
                let form = new FormData;
                let win = this;
                form.append("server_code", this.subsystemCode);
                this.$http.post("api/stock/get/add", form).then(function (response) {
                    if(response !== null){
                        win.data = response.data.commodity;
                        win.value = response.data.stock;
                    } else {
                        win.$message.error("数据查找错误");
                    }
                })
            },
            // 获取子模块当前所占用的商品列表
            handleChange(value, direction, movedKeys) {
               // 偏向数值，用于根据方向的变化进行处理
               let perv = 0;
               if (direction === "left") perv = -1;
               else perv = 1;
               // 将每次操作对应的key值做处理
               for(let index = 0; index < movedKeys.length; index++){
                   let i = this.option_key.indexOf(movedKeys[index]);
                    if(i !== -1){
                        // 说明之前该键值有操作过
                        this.option_value += perv;
                    } else {
                        // 说明这是一个最新处理的数组
                        this.option_key.push(movedKeys[index]);
                        this.option_value.push(perv);
                    }
               }
            },
            // 清除数组中的数据
            doClear(win){
              win.option_delete = [];
              win.option_add = [];
              win.option_key = [];
              win.option_value = [];
            },
            // 按钮对应的确认按钮
            doSureFunc(){
                // 对操作  值进行处理，生成添加与删除的队列
                for(let index = 0; index < this.option_value.length; index++){
                    if(this.option_value[index] === 1){
                        this.option_add.push(this.option_key[index]);
                    } else if(this.option_value[index] === -1){
                        this.option_delete.push(this.option_key[index]);
                    }
                }
                let form = new FormData();
                let win = this;
                form.append("server_code", this.subsystemCode);
                form.append("add", this.option_add);
                form.append("delete", this.option_delete);
                this.$http.post("/api/stock/option",form).then(function (response) {
                    if(response.data){
                        win.$message.success("操作成功");
                        win.doClear(win);
                        win.$emit('watchingCloseVisble',false);
                    } else {
                        win.$message.error("操作失败");
                        win.doClear(win);
                        win.$emit('watchingCloseVisble',false);
                    }
                })
            },
            // 按钮对应的取消按钮
            doCancelFunc(){
                this.doClear(this);
                this.$emit('watchingCloseVisble',false);
            }
        },
        beforeMount() {
            this.getCommodityLis();
        }
    }
</script>

<style scoped>

</style>
